<template>
  <el-popconfirm
      v-if="requireConfirm"
      :title="confirmTitle"
      :confirm-button-text="confirmButtonText"
      :cancel-button-text="cancelButtonText"
      :icon="confirmIcon"
      :icon-color="confirmIconColor"
      @confirm="handleConfirm"
  >
    <template #reference>
      <el-button
          :type="type"
          :icon="icon"
          :loading="loading"
          :disabled="disabled"
          :circle="circle"
          :plain="plain"
          :link="link"
          :style="customColor ? { color: customColor + ' !important' } : {}"
      >
        <slot></slot>
      </el-button>
    </template>
  </el-popconfirm>

  <el-button
      v-else
      :type="type"
      :icon="icon"
      :loading="loading"
      :disabled="disabled"
      :circle="circle"
      :plain="plain"
      :link="link"
      :style="customColor ? { color: customColor + ' !important' } : {}"
      @click="handleClick"
  >
    <slot></slot>
  </el-button>
</template>

<script setup>
import { ElButton, ElPopconfirm } from 'element-plus';
import { QuestionFilled } from '@element-plus/icons-vue';

const props = defineProps({
  type: {
    type: String,
    default: 'default', // primary, success, warning, danger, info, text
  },
  icon: {
    type: Object, // 传入Element Plus的Icon组件
  },
  loading: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  circle: {
    type: Boolean,
    default: false,
  },
  plain: {
    type: Boolean,
    default: false,
  },
  link: {
    type: Boolean,
    default: false,
  },
  customColor: {
    type: String,
    default: null,
  },

  // 自定义功能属性
  requireConfirm: {
    type: Boolean,
    default: false, // 是否需要二次确认
  },
  confirmTitle: {
    type: String,
    default: '您确定要执行此操作吗？',
  },
  confirmButtonText: {
    type: String,
    default: '确定',
  },
  cancelButtonText: {
    type: String,
    default: '取消',
  },
  confirmIcon: {
    type: Object,
    default: () => QuestionFilled,
  },
  confirmIconColor: {
    type: String,
    default: '#f90', // 警告色
  },
});

// 定义组件的emits
const emit = defineEmits(['click']);

// 处理需要二次确认的点击事件
const handleConfirm = () => {
  emit('click');
};

// 处理普通点击事件
const handleClick = () => {
  emit('click');
};
</script>